<template>
  <div class="viewHistoryPage">
    <div class="search-wrap d-flex a-center">
       <span>关键字:</span>
       <el-input v-model="queryName" placeholder="关键字搜索"></el-input>
        <el-button
                class="m-l30 m-r10"
                color="#fc702b"
                style="color:#fff;"
                @click.prevent="onQuery"
        >查询</el-button>
        <el-button
                color="#f0f0f0"
                style="color: #000000"
                @click.prevent="onReset"
        >重置</el-button> 
    </div>
    <el-divider/>
    <public-table
        index
        :page="page"
        :tableData="tableData"
        :tableOption.sync="tableOption"
        @page-change="onPageChange"
    >
      <template #buttons="scope">
        <el-button @click="downloadFile(scope.row)" class="button_funtion2">下载合同</el-button>
        <el-button @click="toHuiShenForm(scope.row)" class="button_view">查看会审单</el-button>
        <el-button @click="toSupplementaryAgreement(scope.row)" class="button_edit">签订补充协议</el-button>
      </template>
    </public-table>
  </div>
  <!-- 下载弹窗组件 -->
  <download-contract-dialog :tableData="fileData" v-model:visible="visible"/>
</template>

<script setup>
import {collaborativeApproval} from "@/api/coordination";
import PublicTable from "@/components/PublicTable";
import DownloadContractDialog from "@/components/downloadContractDialog";
import {onMounted, reactive, ref} from "vue";
import {useRouter} from "vue-router";
import {ElDivider} from "element-plus";

const queryName = ref('');
const tableData = ref([]);
const page = reactive({
  total: 0,
  current: 1,
  size: 10
});
const tableOption = ref([
  { label: "项目名称", prop: "projectName", minWidth: 100 },
  { label: "合同名称 ", prop: "contractName", minWidth: 100 },
  { label: "资源名称  ", prop: "assetsName", minWidth: 100 },
  { label: "资源街道 ", prop: "streetName", minWidth: 100 },
  {
    label: "承租方 ",
    prop: "leaseCustomers",
    formatter: (val) => {
      if (val && val.length !== 0) {
        return val
          .map((item) => {
            return item.customer_name;
          })
          .join(",");
      }
      return "-";
    },
    minWidth: 100
  },
  { label: "合同金额 ", prop: "contractTotalPrice", minWidth: 100 },
  {
    label: "月租金(元) ",
    prop: "signMonthlyRent",
    minWidth: 100
  },
  { label: "经办人", prop: "manageUserName", minWidth: 100 },
  { label: "状态", prop: "statusValue", minWidth: 100 },
  {
    label: "操作",
    slot: true,
    width: 500,
    overHidden: false,
    slotName: "buttons",
  },
]);
const fileData = ref([]);
const visible = ref(false);

//分页查询新租合同历史
const getNewLeaseHisFlows = (param) => {
  collaborativeApproval.getNewLeaseHisFlows(param).then(res=>{
    tableData.value = res.data.content;
    page.total = res.data.totalSize;
  });
}

// 分页
const onPageChange = (e)=>{
  page.current = e.page;
  page.size = e.limit;
  getNewLeaseHisFlows({
    pageNum:page.current,
    pageSize:page.size
  });
}


const router = useRouter();
// 跳转补充协议
const toSupplementaryAgreement = (item) => {
  router.push({ path: `/asset/collaborativeApproval/supplementaryAgreement/${item.contractId}`});
}

// 查看会审单
const toHuiShenForm = (item) => {
  router.push({ path: `/asset/collaborativeApproval/huiShenForm/${item.contractId}`});
}

const downloadFile = (row) => {
  visible.value = true;
  fileData.value = row.files;
}

const onQuery = () => {
    page.current = 1;
    page.size = 10;
    getNewLeaseHisFlows({
        param: {
            queryName:queryName.value
        },
        pageNum: 1,
        pageSize: 10
    });
}

const onReset = () => {
    queryName.value = '';
    page.current = 1;
    page.size = 10;
    getNewLeaseHisFlows({
        pageNum: 1,
        pageSize: 10
    });
}

onMounted(()=>{
  getNewLeaseHisFlows({
    pageNum:1,
    pageSize:10
  });
});
</script>

<style lang="scss" scoped>
.viewHistoryPage{
  .search-wrap{
    .el-input{
      margin-left: 10px;
      width: 300px;
    }
  }
}
</style>
